import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Tabs, Table, Row, Col, Checkbox, message } from 'antd';

const { TextArea } = Input;
let formLayout = {
    labelCol:{ span:4 },
    wrapperCol:{ span:20 }
}
function AddRoleDrawer({ info, globalMenuList, checkedStatus, onDispatch, onClose }){
    const [form] = Form.useForm();
    console.log(checkedStatus);
    let columns = [
        {
            title:'一级菜单',
            dataIndex:'menuId',
            render:(value)=>{
                let temp = globalMenuList.filter(i=>i.menuId === value )[0] || {};
                return  <div><Checkbox style={{ marginRight:'0.5rem' }} checked={checkedStatus[temp.menuId].status} onChange={()=>onDispatch({ type:'permission/setCheckedStatus', payload:temp.menuId })} /><span>{ temp.menuName }</span></div>
            }
        },
        {
            title:'二级菜单',
            dataIndex:'menuId',
            render:(value)=>{
                let temp = globalMenuList.filter(i=>i.menuId === value )[0];
                let childMenus = temp.subMenu || [];
                return (
                    <div>
                        {
                            childMenus.map((subMenu)=>(
                                <div key={subMenu.menuId} style={{ marginBottom: childMenus.length > 1 ? '1rem' : '0' }}><Checkbox style={{ marginRight:'0.5rem' }} checked={checkedStatus[subMenu.menuId].status}  onChange={()=>onDispatch({ type:'permission/setCheckedStatus', payload:subMenu.menuId })}/>{ subMenu.menuName }</div>
                            ))
                        }
                    </div>
                )
            }
        },
        {
            title:'功能按钮',
            dataIndex:'menuId',
            render:(value)=>{
                let temp = globalMenuList.filter(i=>i.menuId === value )[0];
                let childMenus = temp.subMenu || [];
                return (
                    <div>
                        {
                            childMenus.map((secondMenu)=>(
                                <div key={secondMenu.menuId} style={{ display:'flex', flexWrap:'wrap', marginBottom: childMenus.length > 4 ? '1rem' : '0' }}>
                                    {
                                        secondMenu.subMenu && secondMenu.subMenu.length 
                                        ?
                                        secondMenu.subMenu.map((btnMenu)=>(
                                            <div key={btnMenu.menuId} style={{ width:'25%' }}>
                                                <Checkbox 
                                                    style={{ marginRight:'0.5rem' }} 
                                                    checked={checkedStatus[btnMenu.menuId].status} 
                                                    onChange={()=>onDispatch({ type:'permission/setCheckedStatus', payload:btnMenu.menuId })}
                                                />
                                                <span>{ btnMenu.menuName }</span>
                                            </div>
                                        ))
                                        :
                                        <span>--</span>
                                    }                                
                                </div>
                            ))
                        }
                    </div>
                )
            }
        },
    ]
    const items = [
        { 
            label:'web端权限', 
            key:'web',
            children:(
                <Table 
                    columns={columns}
                    rowKey="menuId"
                    dataSource={globalMenuList}
                    pagination={false}
                />
            )
        },
        { label:'移动端权限', key:'mobile' }
    ];
    useEffect(()=>{
        if ( info.visible ) {
            if ( info.forEdit ) {
                form.setFieldsValue({
                    roleName:info.current.roleName,
                    remark:info.current.remark
                });
                onDispatch({ type:'permission/fetchRoleMenuList', payload:{ roleId:info.current.roleId }}) 
            } else {
                form.resetFields();
                onDispatch({ type:'permission/setRoleMenu', payload:{ data:[], reset:true }})
            }
        }
    },[info])
    return (
        <div>
            <Form
                { ...formLayout }
                form={form}
            >
                <Row gutter={24}>
                    <Col span={12}>
                        <Form.Item label='权限名称' name='roleName' rules={[{ required:true, message:'权限名称不能为空' }]}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label='备注' name='remark'>
                            <TextArea rows={2} />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Tabs 
                items={items}
            />
            <div style={{ margin:'2rem', textAlign:'center' }}>
                <Button onClick={onClose} style={{ marginRight:'1rem' }}>取消</Button>
                <Button type='primary' onClick={()=>{
                    form.validateFields()
                    .then(values=>{
                        new Promise((resolve, reject)=>{
                            onDispatch({ type:'permission/addRoleAsync', payload:{ resolve, reject, forEdit:info.forEdit, roleId:info.forEdit ? info.current.roleId : null,  roleName:values.roleName, remark:values.remark }})
                        })
                        .then(()=>{
                            message.success(`${info.forEdit ? '更新' : '添加'}权限成功`);
                            form.resetFields();
                            onClose();
                        })
                        .catch(msg=>message.error(msg))
                    })
                }}>确定</Button>
            </div>
        </div>
    )
}

export default AddRoleDrawer;